<template>
	<view>
		<view class="list">
			<Header></Header>
			<view class="list-main">
				<view class="list-l">
					<view
					v-for="item in firstList"
					:key="item.id"
					:class="item.id==current?'active':''"
					@click="tabsFirst(item.id)"
					>
						{{item.categoryName}}
					</view>
				</view>
				<view class="list-r">
					<scroll-view scroll-y="true" :style="'height:'+height+'px;'">
						<view>
							<view class="r-img">
								<image src="../../static/logo.png" mode=""></image>
							</view>
							<view class="r-main">
								<view class="r-main-item"
								v-for="item in secondList"
								:key="item.id"
								>
									<image :src="item.thumbnail" mode=""></image>
									<text>{{item.categoryName}}</text>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Header from "@/components/common/Header.vue"
	import {getFirstCategorys,getSecondCategorys} from '../../api/course.js'
	import {mixin} from '@/mixins/mixin.js'
	export default {
		components:{
			Header
		},
		mixins: [mixin],
		data() {
			return {
				firstList: [
					{id:'-1',categoryName:'全部1122'}
				],
				secondList: [],
				current: '-1',
				categoryParams:{
					categoryId: -1
				},
				height:0
			}
		},
		onLoad() {
			getFirstCategorys().then(res=>{
				this.firstList = [...this.firstList,...res.list]
			}),
			this.getCategorys()
		},
		onReady() {
			this.height = this.getHeigh('.header-search')
		},
		methods: {
			getCategorys(){
				getSecondCategorys(this.categoryParams).then(res=>{
					this.secondList = res.list
				})
			},
			tabsFirst(id){
				this.current = id
				this.categoryParams.categoryId=id
				this.getCategorys()
			}
		}
	}
</script>

<style>
.list-main{
	display: flex;
	justify-content: space-between;
}
.list-l{
	width: 217rpx;
	line-height: 77rpx;
	font-size: 28rpx;
	color: #777777;
	text-align: center;
	background: rgba(247, 249, 255, 0.39);
}
.list-l > view{
	padding: 18rpx 0;
}
.list-r{
	flex: 1;
	display: flex;
	flex-direction: column;
	/* align-items: center; */
}
.r-img{
	padding: 0 34rpx;
}
.r-img image{
	width: 479rpx;
	height: 192rpx;
	border-radius: 17rpx;
}
.r-main{
	display: flex;
	flex-wrap: wrap;
}
.r-main-item{
	display: flex;
	flex-direction: column;
	/* justify-content: center; */
	align-items: center;
	width: 33.33%;
	margin-top: 44rpx;
}
.r-main-item image{
	width: 83rpx;
	height: 83rpx;
}
.r-main-item text{
	padding: 18rpx 0;
	font-size: 24rpx;
	color: #A9A9A9;
}
.active{
	position: relative;
	font-weight: 400;
	color: #3780EF;
}
.active::before{
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	
	width: 6rpx;
	height: 40%;
	transform: translateY(-50%);
	background: rgba(55, 128, 239, 0.27);
	border: 1px solid #0065FF;
	border-radius: 3px;
}
</style>
